<template>
  <div>
    <SpanTable ref="spanTable" @setThreadTable="setThreadTable" @setSpanDetail="setSpanDetail"></SpanTable>
    <ThreadStackTable ref="threadTable"></ThreadStackTable>
    <SpanDetail ref="detail"></SpanDetail>
  </div>
</template>
<script lang="ts" setup>
import SpanTable from './traceTable/SpanTable.vue';
import ThreadStackTable from './traceTable/ThreadStackTable.vue';
import SpanDetail from './traceTable/SpanDetail.vue';
import { ref } from 'vue';
const spanTable = ref();
const threadTable = ref();
const detail = ref();
const setTable = (sampleItem) => {
  spanTable.value.setTable(sampleItem);
};
const setThreadTable = (threadParam) => {
  threadTable.value.setTable(threadParam);
};
const setSpanDetail = (record) => {
  detail.value.openDetail(record);
};
const clearAnalyze = () => {
  threadTable.value.clearTable();
};
const clear = () => {
  spanTable.value.clearTable();
  threadTable.value.clearTable();
};
defineExpose({ setTable, clear, clearAnalyze });
</script>
